import React, { useEffect, useState, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { Drawer } from 'antd';
import { reqReportList } from '@/services/index'

const ReportDrawer = forwardRef(({ user }, ref) => {
    const [visible, setVisible] = useState(false)
    const [data, setData] = useState([])

    useEffect(() => {
        if (visible) {
            reqReportList({
                user_id: user.user_id
            }).then(res => {
                setData(res.data)
            })
        }
    }, [visible])

    if (ref) {
        ref.current = {
            open: () => {
                setVisible(true)
            },
            close: () => {
                setVisible(false)
            }
        }
    }

    return <Drawer
        title="举报列表"
        width={400}
        placement="right"
        onClose={() => setVisible(false)}
        closable={false}
        visible={visible}
    >
        <div>
            {
                data.map(item => <div style={{ marginBottom: 24, borderBottom: '1px solid #e9e9e9' }}>
                    <p>举报原因：1</p>
                    <p>描述：2</p>
                </div>)
            }
        </div>
    </Drawer>
})

ReportDrawer.propTypes = {
    data: PropTypes.object
}

export default ReportDrawer
